<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 图标文字字体 -->
  <link rel="stylesheet" href="css/font-awesome.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div class="play_box">
      <video src="fun.mp4"></video>
    
    <!-- 控制栏 -->
    <div class="controls">

     <!-- 播放按钮 -->
        <div class="l_play"><a href="javascript:;" class="fa fa-play"></a></div>

     <!-- 进度条 -->
     <div class="progress">
         <div class="line"></div>
     </div>

     <!-- 显示时间 -->
     <div class="tims">
          <div class="current">00:00:00</div>
        <div class="bar">/</div>
          <div class="total"></div>
     </div>


     <!-- 全屏 -->
     <div class="fullscreen">
         <a href="javascript:;" class="fa fa-expand"></a>
     </div>
    </div>
  </div>
  <script>
    //先获取到当前多媒体视频标签 video
    var video = document.querySelector('video');
    //获取总时长标签
    var total = document.querySelector('.total');
    //获取播放按钮
    var play_btn = document.querySelector('.l_play a');
    //获取当前播放事件的按钮
    var current = document.querySelector('.current');
    //获取进度条(也就是播放的总长度)
    var progress = document.querySelector('.progress');
    // console.dir(progress)
    //获取当前播放的进度条(也就是播放时候显示的长度)
    var line = document.querySelector('.line');
    //获取全屏按钮
    var fullscreen = document.querySelector('.fullscreen a');
    

    //我们做的所有操作都应该在视频文件加载完成后执行
    video.addEventListener('canplay',function(){
      //先获取当前视频文件的总时长 获取到总是长div 并显示到页面中
    
      total.innerText = get_time(this.duration)
      
      play_btn.onclick = function(){

        if(video.paused == true){
          video.play()
        }else{
          video.pause()
        }
        //操作播放和暂停标签的样式
        this.classList.toggle('fa-pause');
      };
      //设置跳播功能
      //本质就是改变当前播放时间
      //进度条总长度 ：当前宽度 = 总时长 ：当前播放时长
      //当前播放时长 = 当前宽度(当前进度条宽度) * 总时长 / 进度条总长度
      progress.onclick = function(e){
        // console.dir(e);
        video.currentTime = e.offsetX * video.duration / this.offsetWidth;
      }
      //全屏功能设置
      fullscreen.onclick = function(e){
        video.webkitRequestFullScreen();
      }

    });
    //获取当前视频的实时时间的事件是timeupdate
    video.addEventListener('timeupdate',function(){
       //先获取当前视频文件的实时播放时间 获取到实时播放的div 并显示到页面中
      current.innerText = get_time(this.currentTime);

    //设置当前进度条的播放实时宽度
    //进度条总长度 ：当前宽度 = 总时长 ：当前播放时长
    //当前宽度 = 进度条总长度 * 当前播放时长 / 总时长
    //progress.offsetWidth
    line.style.width = progress.offsetWidth * this.currentTime /this.duration + 'px';
    });

    //获取时间格式
    function get_time(seconds){
      var h = parseInt(seconds / 60 / 60);
      var m = parseInt(seconds / 60);
      var s = parseInt(seconds % 60);
      h = h > 10 ? h : '0'+ h;
      m = m > 10 ? m : '0'+ m;
      s = s > 10 ? s : '0'+ s;
      var time_str = h+':'+m+':'+s;
      return time_str;
    };
  </script>
</body>
</html>